<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>住改非</div>
      </div>
    </header>
    <div class="main">
      <div class="item">
        <div class="item-name">街道</div>
        <div class="item-value">{{sendObj.jd}}</div>
      </div>
      <div class="item">
        <div class="item-name">社区</div>
        <div class="item-value" v-show="!sq_select_flag">{{sendObj.sq}}</div>
        <div class="item-select" v-show="sq_select_flag" @click="openTk('社区')">
          <div class="item-select-value">{{sendObj.sq?sendObj.sq:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">建筑物</div>
        <div class="item-select" @click="openTk('建筑物')">
          <div class="item-select-value">{{sendObj.cname?sendObj.cname:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">小区名称</div>
        <div class="item-select" @click="openTk('小区')">
          <div class="item-select-value">{{sendObj.xq?sendObj.xq:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">物管名称</div>
        <div class="item-select" @click="openTk('物管名称')">
          <div class="item-select-value">{{sendObj.wy?sendObj.wy:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">定位</div>
        <div class="item-select" @click="dingwei">
          <div v-show="!sendObj.jwd" class="item-select-value">进行定位</div>
          <img v-show="!sendObj.jwd" class="item-select-icon" src="../../assets/images/appa_r.png" />
          <img v-show="sendObj.jwd" class="item-select-icon" style="width: 0.416666rem;height: 0.648148rem;" src="../../assets/images/dw_1.png" />
        </div>
      </div>
      <div class="item">
        <div class="item-name">具体地址</div>
        <input class="item-value" type="text" placeholder="请输入" maxlength="30" v-model="sendObj.dizhi" @click="clickValue($event)" />
      </div>
      <div class="item">
        <div class="item-name">建筑面积</div>
        <div class="item-select">
          <div class="item-select-value">
            <input type="text" placeholder="请输入" v-model="sendObj.jzmj" @click="clickValue($event)" @input="inputValue('jzmj')" @blur="blurValue('jzmj')" />
          </div>
          <div class="item-select-icon">m²</div>
        </div>
      </div>
      <div class="item">
        <div class="item-name">用途</div>
        <div class="item-select" @click="openTk('用途')">
          <div class="item-select-value">{{sendObj.yt?sendObj.yt:'请选择'}}</div>
          <img class="item-select-icon" src="../../assets/images/appa_r.png" />
        </div>
      </div>

      <div class="item">
        <div class="item-name">产权人</div>
        <input class="item-value" type="text" placeholder="请输入" v-model="sendObj.fd" @click="clickValue($event)" />
      </div>
      <div class="item">
        <div class="item-name">承租人</div>
        <input class="item-value" type="text" placeholder="请输入" v-model="sendObj.czr" @click="clickValue($event)" />
      </div>
      <div class="item">
        <div class="item-name" style="width: 2.777777rem;">承租人联系电话</div>
        <input placeholder="请输入" class="item-value" type="text" maxlength="11" v-model="sendObj.lxdh" @click="clickValue($event)" @input="inputValue('lxdh')" />
      </div>

      <div class="item">
        <div class="item-name">对应门市</div>
        <input class="item-value" type="text" placeholder="请输入" maxlength="30" v-model="sendObj.correspondingmenshi" @click="clickValue($event)" />
      </div>

      <div class="item" v-show="!checkNull(sendObj.id)">
        <div class="item-name">巡查记录</div>
        <div class="item-value">{{sendObj.xxNum?sendObj.xxNum:0}}</div>
      </div>

      <ul class="img-box img_upload">
        <div class="img-item radius-m" @click="showPopup"></div>
      </ul>
      <ul class="img-box imgs_ul" v-show="list_img.length>0">
        <li class="img-item radius-m img-list" :class="{'show-desc':obj.showDesc}" v-for="(obj,i) of list_img">
          <div class="img-content">
            <img class="img-src img_tu" :src="show_path+obj.path" />
            <div class="img-group">
              <div class="img-btn">
                <div class="del-btn" @click.stop="del(i,'img')">X</div>
              </div>
              <div class="img-btn">
                <div class="desc-btn" @click.stop="showDesc(i)">A</div>
              </div>
            </div>
          </div>
          <input class="img-desc" type="text" @click.stop="stopMP" placeholder="请输入描述" v-model="list_img[i].remark" />
        </li>
      </ul>
      <ul class="video-list" v-for="(obj,i) of list_mv">
        <video controls>
          <source :src="show_path+obj.path" type="video/mp4">
          <source :src="show_path+obj.path" type="video/ogg">
          您的浏览器不支持Video标签。
        </video>
        <div class="del" @click.stop="del(i,'mv')"><img src="../../assets/images/delete.png" /></div>
      </ul>

      <div class="btn-box">
        <div class="btn radius-m" @click="save">保存</div>
      </div>

      <!-- 有新增按钮的 -->
      <div class="tk" v-show="tk_type=='物管名称'||tk_type=='小区'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box">
          <div class="tk-head">
            <div class="tk-head-title">请选择</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" >
          </div>
          <div class="tk-list">
            <div class="tk-item" v-for="(item,i) of tk_list" :class="{'tk-item-checked':checked.id==item.id}" @click="checkedTk(item)">
              <span class="tk-item-value">{{item.mc}}</span>
            </div>
          </div>
          <div class="tk-btns">
            <div class="tk-btn radius-m" @click="showCont">新增</div>
          </div>
        </div>
      </div>
      <div class="tk" v-show="tk_type=='用途'||tk_type=='建筑物'||tk_type=='社区'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box">
          <div class="tk-head">
            <div class="tk-head-title">请选择</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" >
          </div>
          <div class="tk-list">
            <div class="tk-item" v-show="!(tk_type=='社区'&&item.id===-1)" v-for="(item,i) of tk_list" :class="{'tk-item-checked':checked.id==item.id}" @click="checkedTk(item)">
              <span class="tk-item-value">{{item.mc}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="tk" v-show="tk_type=='物管名称新增'||tk_type=='小区新增'">
        <div class="tk-bg" @click="closeTk"></div>
        <div class="tk-box xz-tk" >
          <div class="tk-head">
            <div class="tk-head-title">请输入</div>
            <img class="tk-head-close" src="../../assets/images/appa_r.png" />
          </div>
          <div class="tk-listt">
            <input class="img-input"  v-model="arr" maxlength="20"  type="text" :placeholder="tk_type=='物管名称新增'?'请输入物业名称':'请输入小区名称'" />
          </div>
          <div class="tk-btns">
            <div class="tk-btn radius-m" @click="showsave">保存</div>
          </div>
        </div>
      </div>


    </div>
    <van-popup v-model="btm_show" position="bottom">
      <div class="btm_tk_item btm_tk_title">上传资料</div>
      <div v-if="terminal === true" class="btm_tk_item" @click="sp">上传视频</div>
      <div class="btm_tk_item" @click="pz">拍照</div>
      <div class="btm_tk_item btm_tk_item-end" @click="xc">从手机相册选择</div>
      <div class="btm_tk_cancle" @click="closePopup">取消</div>
    </van-popup>
  </div>
</template>
<script>
import { Dialog } from "vant";
import "../../assets/js/zoom.js"
import upload from "../../assets/js/upload_vue.js"
import terminal from "../../assets/js/terminal";
export default {
  name: "jzw",
  data() {
    return {
      sendObj: {},
      arr:"",//新增弹框内容
      tk_type:'',//显示的弹框，如果为空就隐藏弹框
      tk_list: [], //弹框列表
      checked: null ,//弹框选中的
      btm_show: false,//是否显示底部弹框
      userId:null,//用户id
      xqda_params:null,
      show_path:null,
      list_img:[],
      list_mv:[],
      delImg:[],
      delMv:[],
      doing:false,
      sq_select_flag:false,
      terminal: false
    };
  },
  destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
  methods: {
    back(){
      // var xcdx_map_action = localStorage.getItem("xcdx_map_action")?JSON.parse(localStorage.getItem("xcdx_map_action")):null;
      // if(xcdx_map_action){
      //   this.$router.push('/xcdx_map');
      // }else{
      //   if(this.xqda_params&&this.xqda_params.xq_id){
      //     this.$router.push('/zgf_see');
      //   }else{
      //     this.$router.push('/xqda');
      //   }
      // }
      this.$router.back()
    },
    showCont() {//显示新增
      this.tk_type=this.tk_type+'新增';
      this.arr="";
    },
    showsave() {//保存新增
      var _this = this;
      var url = '';
      var params = {};
      if(_this.checkNull(_this.arr)){
        return;
      }
      if(_this.tk_type=='小区新增'){
        url = _this.$global_msg.Url.host + "/queryFile/insertXqByJd";
        params = {
          mc:_this.arr,
          fid:_this.sendObj.sid
        };
      }else if(_this.tk_type=='物管名称新增'){
        url = _this.$global_msg.Url.host + "/queryFile/insertWy";
        params = {
          name:_this.arr
        };
      }else{
        return;
      }
      _this.axios.get(url,{
      	params: params
      }).then(function (data) {
        console.log('insertXqByJd:',data);
        if(data&&data.data){
          if(data.data.code===0){

            if(_this.tk_type=='物管名称新增'){
              _this.sendObj.wy=data.data.rows.name;
              _this.sendObj.wyid=data.data.rows.id;
            }else if(_this.tk_type=='小区新增'){
              _this.sendObj.xq=data.data.rows.mc;
              _this.sendObj.xqid=data.data.rows.id;
            }
            _this.closeTk();
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }

        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    dingwei(){//定位
      var oldEditObj = {
        sendObj: this.sendObj,
        arr:this.arr,
        tk_type:this.tk_type,
        tk_list:this.tk_list,
        checked:this.checked,
        btm_show:this.btm_show,
        userId:this.userId,
        xqda_params:this.xqda_params,
        show_path:this.show_path,
        list_img:this.list_img,
        list_mv:this.list_mv,
        delImg:this.delImg,
        delMv:this.delMv,
        doing:this.doing,
        sq_select_flag:this.sq_select_flag,
        terminal: this.terminal
      };
      localStorage.setItem("oldEditObj",JSON.stringify(oldEditObj));
      var MapPosObj = {
        address:'111',
        jwd:this.sendObj.jwd
      };
      localStorage.setItem("MapPosObj",JSON.stringify(MapPosObj));
      this.$router.push("/MapPos");
    },
    pz(){//拍照
      var _this = this;
      _this.btm_show = false;
      upload.paizhao(function(path){
        console.log(path);
        _this.uploadImg(path);
      },function(msg){
        _this.$toast(msg);
      });
    },
    xc(){//相册
      var _this = this;
      _this.btm_show = false;
      upload.xiangce('image',false,function(path){
        console.log(path);
        _this.uploadImg(path);
      },function(msg){
        _this.$toast(msg);
      });
    },
    sp(){//视频
      var _this = this;
      _this.btm_show = false;
      upload.record(function(path){
        console.log(path);

        //获取视频信息
        plus.io.getVideoInfo({
          filePath:path,
          success:function(data){
            console.log(data);
            console.log(data.duration)
            //视频时间15秒以内才上传
            if((data.duration*1)>11){
              _this.$toast('上传的视频时间请在10秒以内');
              return;
            }else{
              _this.uploadVideo(path);
            }
          },
          fail:function(e){
            _this.$toast(e.msg);
          }
        });


      },function(msg){
        _this.$toast(msg);
      });
    },
    uploadImg(path){//上传图片
      var _this = this;
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      var params = {};
      upload.uploadImg(_this.$global_msg.Url.hosts + '/queryFile/uploadImg','POST',params,path,'img',function(data){
        console.log(data);
        if(data.code==200){
          _this.list_img.push({
            path:data.rows
          });
        }else{
          _this.$toast(data.msg);
        }

        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      },function(msg){
        _this.$toast(msg);
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      });
    },
    uploadVideo(path){//上传视频
      var _this = this;
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      var params = {};
      upload.uploadVideo(_this.$global_msg.Url.hosts + '/queryFile/uploadMV','POST',params,path,'mv',function(data){
        data = JSON.parse(data);
        if(data.code==200){
          _this.list_mv.push({
            path:data.rows
          });
        }else{
          console.log(data);
          _this.$toast(data.msg);
        }

        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      },function(msg){
        _this.$toast(msg);
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      });
    },
    showPopup() {//显示下拉框
      this.btm_show = true;
    },
    closePopup() {//隐藏下拉框
      this.btm_show = false;
    },
    openTk(type) {//打开弹出框
      var _this = this;

      var checked = {};
      var url = '';
      var params = {};
      if (type == "用途") {
        checked = {
          id:_this.sendObj.ytid,
          mc:_this.sendObj.yt
        };
        url = _this.$global_msg.Url.host + "/queryFile/selectYt";
        params = {};
      }else if(type=='建筑物'){//建筑物
        checked = {
          id:_this.sendObj.constructionId,
          mc:_this.sendObj.cname
        };
        params = {
          userid:_this.userId
        };
        url = _this.$global_msg.Url.host + "/construction/selectConstructionName";
      }else if(type=='物管名称'){//物管名称
        checked = {
          id:_this.sendObj.wyid,
          mc:_this.sendObj.wy
        };
        url = _this.$global_msg.Url.host + "/queryFile/selectWy";
        params = {};
      }else if(type=='小区'){//小区
        if(_this.checkNull(_this.sendObj.sid)){
          if(_this.sq_select_flag){
            _this.$toast('请先选择社区');
          }else{
            _this.$toast('社区id为空');
          }
          return;
        }
        checked = {
          id:_this.sendObj.xqid,
          mc:_this.sendObj.xq
        };
        url = _this.$global_msg.Url.host + "/queryFile/selectXqBySqId";
        params = {
          sid:_this.sendObj.sid
        };
      }else if(type=='社区'){//社区
        checked = {
          id:_this.sendObj.sid,
          mc:_this.sendObj.sq
        };
        params = {
          sid:_this.sendObj.jdid
        };
        url = _this.$global_msg.Url.host + "/queryFile/queryCommunity";
      }
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(url,{
      	params: params
      }).then(function (data) {
        console.log('查询弹框列表:',data);
        if(data&&data.data){
          if(data.data.code===0){
            if(type=='物管名称'){//物管名称
              for(var key in data.data.rows){
                data.data.rows[key].mc = data.data.rows[key].Name;
              }
            }
            if(type=='建筑物'){//建筑物
              for(var key in data.data.rows){
                data.data.rows[key].mc = data.data.rows[key].name;
              }
            }
            _this.tk_list = data.data.rows;
            _this.checked = checked;
            _this.tk_type = type;
            $("html").css("height","100vh");
            $("body").css("height","100vh");
            $("html").css("overflow","hidden");
            $("body").css("overflow","hidden");
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }

        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    closeTk() {//关闭弹出框
      this.tk_type = "";
      this.arr="";
      this.tk_list = [];
      this.checked = null;
      $("html").css("height","auto");
      $("body").css("height","auto");
      $("html").css("overflow","auto");
      $("body").css("overflow","auto");
    },
    checkedTk(item) {//弹出框选中选项
      var _this = this;
      if (_this.tk_type == "建筑物") {//建筑物
        _this.sendObj.cname = item.mc;
        _this.sendObj.constructionId = item.id;
      } else if (_this.tk_type == "用途") {//用途
        _this.sendObj.yt = item.mc;
        _this.sendObj.ytid = item.id;
      }else if (_this.tk_type == "物管名称") {//物管名称
        _this.sendObj.wy = item.mc;
        _this.sendObj.wyid = item.id;
      }else if (_this.tk_type == "小区") {//小区
        _this.sendObj.xq = item.mc;
        _this.sendObj.xqid = item.id;
      } else if (_this.tk_type == "社区") {//社区
        _this.sendObj.sq = item.mc;
        _this.sendObj.sid = item.id;
      }
      _this.closeTk();
    },
    stopMP(){

    },
    inputValue(key) {//限制输入框的值
      var _this = this;
      var value = _this.sendObj[key];
      if(value==null||value==undefined){
        value = '';
      }else{
        value += '';
      }
      if (key == "lxdh") {//输入大于0的正整数
        if (value.length == 1) {
          value = value.replace(/[^1-9]/g, "");
        } else {
          value = value.replace(/\D/g, "");
        }
      }
      if (key == "jzmj") {
        //只能输入数字和小数点，保留小数点后两个小数
        value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
        value = value.replace(/^\./g, ""); //验证第一个字符是数字而不是
        value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        value = value
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
        if(value.length>1&&value[0]==='0'&&value[1]!=='.'){
          value=value.substring(1,value.length);
        }
      }
      _this.sendObj[key] = value;
      _this.$forceUpdate();
    },
    blurValue(key){
      var _this = this;
      var value = _this.sendObj[key];
      if(value==null||value==undefined){
        value = '';
      }else{
        value += '';
      }
      if (key == "jzmj"&&(!_this.checkNull(value))) {
        //只能输入数字和小数点，保留小数点后两个小数
        value = value.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
        value = value.replace(/^\./g, ""); //验证第一个字符是数字而不是
        value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        value = value
          .replace(".", "$#$")
          .replace(/\./g, "")
          .replace("$#$", ".");
        value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
        if(value.length>1&&value[0]==='0'&&value[1]!=='.'){
          value=value.substring(1,value.length);
        }
        value = value*1;
      }
      _this.sendObj[key] = value;
      _this.$forceUpdate();
    },
    clickValue(e){//点击后光标移到最后
      var t = $(e.currentTarget).val();
      $(e.currentTarget).val("").focus().val(t);
    },
    init() {//初始化
      var _this = this;
      if(_this.checkNull(_this.xqda_params.xq_id)){
        _this.initXz();
        return;
      }
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(_this.$global_msg.Url.host + "/queryFile/findZgfinfoById",{
      	params:{
      	  id:_this.xqda_params.xq_id
      	}
      }).then(function (data) {
        console.log('findZgfinfoById:',data);
        if(data&&data.data){
          if(data.data.code==0){
            var obj = data.data.rows;
            _this.sendObj = obj;
            var jwd = _this.sendObj.jwd;
            if(jwd){
              if(jwd.trim().toLowerCase()=='null'||jwd.trim().toLowerCase()=='undefined'){
                jwd = '';
              }else{
                jwd = jwd.trim();
              }
            }else{
              jwd = '';
            }
            _this.sendObj.jwd = jwd;
            _this.sendObj.constructionId = obj.cid;
            _this.list_img = obj.imgs?obj.imgs:[];
            _this.list_mv = obj.zgfVideos?obj.zgfVideos:[];
            _this.sendObj.imgs = null;
            _this.sendObj.zgfVideos = null;

            var xcdx_map_action = localStorage.getItem("xcdx_map_action")?JSON.parse(localStorage.getItem("xcdx_map_action")):null;
            if(xcdx_map_action){
              _this.sendObj.ytid = xcdx_map_action.obj.s_type;;
              _this.sendObj.yt = xcdx_map_action.obj.s_type_mc;
              _this.sendObj.jwd = xcdx_map_action.obj.jwd;
              if(!(_this.sendObj.dizhi||_this.sendObj.dizhi===0)){
                _this.sendObj.dizhi = xcdx_map_action.obj.address;
              }
            }
          }else{
            _this.$toast(data.data.msg);
          }
        }else{
          _this.$toast('查询失败');
        }

        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    initXz() {
      var _this = this;
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(_this.$global_msg.Url.host + "/nineStore/selectStreetAndCommunity",{
      	params: {
          userId:_this.userId
        }
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('selectStreetAndCommunity:',data);
        if(data&&data.data&&data.data.code===0){
          if(data.data.rows.lev==='0'){
            //最高权限，有多个街道信息
            //data.data.rows.jd[0]
          }else if(data.data.rows.lev==='1'){
            //街道
            if(data.data.rows.jd){
              _this.sendObj.jdid = data.data.rows.jd.id;
              _this.sendObj.jd = data.data.rows.jd.mc;
            }
            _this.sq_select_flag = true;
          }else if(data.data.rows.lev==='2'){
            //社区
            if(data.data.rows.jd){
              _this.sendObj.jdid = data.data.rows.jd.id;
              _this.sendObj.jd = data.data.rows.jd.mc;
            }
            if(data.data.rows.sq){
              _this.sendObj.sid = data.data.rows.sq.id;
              _this.sendObj.sq = data.data.rows.sq.mc;
            }
          }
          var xcdx_map_action = localStorage.getItem("xcdx_map_action")?JSON.parse(localStorage.getItem("xcdx_map_action")):null;
          if(xcdx_map_action){
            _this.sendObj.ytid = xcdx_map_action.obj.s_type;;
            _this.sendObj.yt = xcdx_map_action.obj.s_type_mc;
            _this.sendObj.jwd = xcdx_map_action.obj.jwd;
            if(!(_this.sendObj.dizhi||_this.sendObj.dizhi===0)){
              _this.sendObj.dizhi = xcdx_map_action.obj.address;
            }
          }
          _this.$forceUpdate();
        }else{
          _this.$toast('查询失败');
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    showDesc(i) {//显示图片描述
      this.list_img[i].showDesc = !this.list_img[i].showDesc;
      this.$forceUpdate();
    },
    del(i,type) {//删除图片
      if(type=='img'){
        if(this.list_img[i].id){//不是新上传的图片
          this.delImg.push(this.list_img[i].id);
          this.list_img.splice(i, 1);
        }else{
          this.list_img.splice(i, 1);
        }
      }else{
        if(this.list_mv[i].id){//不是新上传的视频
          this.delMv.push(this.list_mv[i].id);
          this.list_mv.splice(i, 1);
        }else{
          this.list_mv.splice(i, 1);
        }
      }
    },
    checkNull(value){//检测是否为空
      if(value||value===0||value==='0'){
        return false;
      }else{
        return true;
      }
    },
    save() {//保存
      var _this = this;

      if(_this.doing){
        return;
      }else{
        _this.doing = true;
      }
      /*if(_this.checkNull(_this.sendObj.cname)){
        _this.$toast('建筑物必选');
        _this.doing = false;
        return;
      }*/
      if(_this.checkNull(_this.sendObj.xq)){
        _this.$toast('小区名称必选');
        _this.doing = false;
        return;
      }
      if(_this.checkNull(_this.sendObj.dizhi)){
        _this.$toast('具体地址必填');
        _this.doing = false;
        return;
      }
      if(_this.checkNull(_this.sendObj.jzmj)){
        _this.$toast('建筑面积必填');
        _this.doing = false;
        return;
      }
      if(_this.checkNull(_this.sendObj.yt)){
        _this.$toast('用途必选');
        _this.doing = false;
        return;
      }
      if(_this.checkNull(_this.sendObj.czr)){
        _this.$toast('承租人必填');
        _this.doing = false;
        return;
      }
      if(_this.checkNull(_this.sendObj.lxdh)){
        _this.$toast('承租人联系电话必填');
        _this.doing = false;
        return;
      }
      if(_this.sq_select_flag&&_this.checkNull(_this.sendObj.sid)){
        _this.$toast('社区必选');
        _this.doing = false;
        return;
      }


      var imgStr = '';//上传的图片拼接字符串
      var mvStr = '';//上传的视频拼接字符串
      var oldImgStr ='';//原来的图片
      for(var n=0;n<_this.list_img.length;n++){
        var obj = _this.list_img[n];
        if(obj.id){
          oldImgStr += obj.id+'^'+(obj.remark?obj.remark:'')+'|';
        }else{
          imgStr += obj.path+'^'+(obj.remark?obj.remark:'')+'|';
        }
      }
      for(var n=0;n<_this.list_mv.length;n++){
        var obj = _this.list_mv[n];
        if(!obj.id){
          mvStr += obj.path+'|';
        }
      }
      if(imgStr){
        imgStr=imgStr.substring(0,imgStr.length-1);
      }
      if(oldImgStr){
        oldImgStr=oldImgStr.substring(0,oldImgStr.length-1);
      }
      if(mvStr){
        mvStr=mvStr.substring(0,mvStr.length-1);
      }

      var delImgStr = '';//删除的图片id拼接字符串
      var delMvStr = '';//删除的视频id拼接字符串
      for(var n=0;n<_this.delImg.length;n++){
        delImgStr += _this.delImg[n]+',';
      }
      for(var n=0;n<_this.delMv.length;n++){
        delMvStr += _this.delMv[n]+',';
      }
      if(delImgStr){
        delImgStr=delImgStr.substring(0,delImgStr.length-1);
      }
      if(delMvStr){
        delMvStr=delMvStr.substring(0,delMvStr.length-1);
      }

      _this.sendObj.imgStr = imgStr;
      _this.sendObj.mvStr = mvStr;
      _this.sendObj.oldImgStr = oldImgStr;
      _this.sendObj.delImgStr = delImgStr;
      _this.sendObj.delMvStr = delMvStr;
      //_this.sendObj.dz = null;
      //_this.sendObj.dwdz = null;
      _this.sendObj.addtiem = null;
      _this.sendObj.updatetime = null;
      _this.sendObj.uid = _this.userId;
      _this.sendObj.userid = _this.userId;
      var url = '';
      if(!_this.checkNull(_this.xqda_params.xq_id)){//修改
        url = _this.$global_msg.Url.host + "/queryFile/updateZgf";
      }else{//新增
        _this.sendObj.id = null;
        _this.sendObj.dwid = _this.sendObj.sid;
        url = _this.$global_msg.Url.host + "/queryFile/insertZgf";
      }
      try{
        plus.nativeUI.showWaiting("正在加载...");
      }catch(e){
        console.log(e.message);
      }
      _this.axios.get(url,{
      	params: _this.sendObj
      }).then(function (data) {
        try{
          plus.nativeUI.closeWaiting();
        }catch(e){
          console.log(e.message);
        }
        console.log('updateZgf:',data);
        if(data&&data.data){
          if(data.data.code===0){
            _this.$toast({
              message: '保存成功',
              onClose: () => {
                var xcdx_map_action = localStorage.getItem("xcdx_map_action")?JSON.parse(localStorage.getItem("xcdx_map_action")):null;
                if(xcdx_map_action){
                  _this.sendObj.id = data.data.rows&&data.data.rows.id?data.data.rows.id:'';
                  _this.sendObj.b_type = 'zgf';
                  _this.sendObj.s_type = _this.sendObj.ytid;
                  _this.sendObj.s_type_mc = _this.sendObj.yt;
                  _this.sendObj.address = _this.sendObj.dizhi;
                  _this.sendObj.mc = _this.sendObj.xq;
                  var xcpc_da_obj = {
                    id:_this.sendObj.id,
                    type:'zgf',
                    jwd:_this.sendObj.jwd,
                    oldjwd:''
                  };
                  localStorage.setItem("xcpc_da_obj",JSON.stringify(xcpc_da_obj));
                  localStorage.setItem("xcdx_map_xcdxObj",JSON.stringify(_this.sendObj));
                  localStorage.removeItem("param_fgd");
                  var xcdx_map_manager = localStorage.getItem("xcdx_map_manager")?JSON.parse(localStorage.getItem("xcdx_map_manager")):{from:'/index',init:false};
                  //_this.$router.push(xcdx_map_manager.from);
                  _this.$router.go(-2);
                }else{
                  if(_this.xqda_params.xq_id){//修改
                    localStorage.setItem("xqda_params",JSON.stringify(_this.xqda_params));
                    //_this.$router.push("/zgf_see");
                  }else{//新增
                    //_this.$router.push("/xqda");
                  }
                  _this.$router.back()
                }
              }
            })
          }else{
            _this.$toast(data.data.msg);
            _this.doing = false;
          }
        }else{
          _this.$toast('查询失败');
          _this.doing = false;
        }
      }).catch(error => {
        _this.$terminal._error(error);
      });
    },
    plusReady: function() {

    }
  },
  beforeCreate() {
    document.addEventListener("plusready", this.plusReady, false);
  },
  mounted() {
    var oldEditObj = localStorage.getItem("oldEditObj")?JSON.parse(localStorage.getItem("oldEditObj")):null;
    if(oldEditObj){
      this.sendObj = oldEditObj.sendObj;
      this.arr = oldEditObj.arr;
      this.tk_type = oldEditObj.tk_type;
      this.tk_list = oldEditObj.tk_list;
      this.checked = oldEditObj.checked;
      this.btm_show = oldEditObj.btm_show;
      this.userId = oldEditObj.userId;
      this.xqda_params = oldEditObj.xqda_params;
      this.show_path = oldEditObj.show_path;
      this.list_img = oldEditObj.list_img;
      this.list_mv = oldEditObj.list_mv;
      this.delImg = oldEditObj.delImg;
      this.delMv = oldEditObj.delMv;
      this.doing = oldEditObj.doing;
      this.sq_select_flag = oldEditObj.sq_select_flag;
      this.terminal = oldEditObj.terminal;

      var MapPosResult = localStorage.getItem("MapPosResult")?JSON.parse(localStorage.getItem("MapPosResult")):null;
      if(MapPosResult){
        this.sendObj.jwd = MapPosResult.jd+','+MapPosResult.wd;
        var dz = this.sendObj.dizhi;
        if(dz||dz===0){
          dz+='';
          dz = dz.replace(/\ +/g,'').replace(/[ ]/g,'').replace(/[\r\n]/g,'');
          if(!dz){
            this.sendObj.dizhi = MapPosResult.address;
          }
        }else{
          this.sendObj.dizhi = MapPosResult.address;
        }
      }
      this.$forceUpdate();
    }else{
      this.xqda_params = localStorage.getItem('xqda_params')?JSON.parse(localStorage.getItem('xqda_params')):{};
      this.userId = localStorage.getItem("userId"); //用户id
      this.show_path = this.$global_msg.Url.hosts+'';
      this.terminal = terminal.terminals().android;
      //初始化
      this.init();
    }
    localStorage.removeItem("oldEditObj");
    localStorage.removeItem("MapPosResult");
  },
  created() {
    //this.$maps.hqqx()
  }
};
</script>
<style scoped>
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
.tk-listt{
padding: 0.1rem;
}
.img-input{
  padding:  0.27037rem;
 position: relative;
 top: 0.1rem;
  width: 89%;
  display: block;
  margin: auto;
  border: 1px solid #ddd;
}
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 0.388888rem;
    bottom: 0.462962rem;
  }

  .main {
    padding-top: 1.8519rem;
    /* height: 100vh; */
    box-sizing: border-box;
    background: #fff;
    /*padding-bottom: 3.796314814814815rem; */
    /* padding-top: 10.0008px; */
  }

  /* 圆角 */
  .radius-b{
    border-radius: 0.222222rem;
  }
  .radius-m{
    border-radius: 0.166666rem;
  }
  .radius-s{
    border-radius: 0.111111rem;
  }

  /* 表单 */
  .item{
    width: 100%;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #DDDDDD solid;
  }
  .item .item-name{
    flex: 1;
    padding-left: 0.37037rem;
    padding-right: 0.37037rem;
    color: #000000;
    font-size: 0.388888rem;
  }
  .item .item-value{
    width: 5.555555rem;
    margin-right: 0.37037rem;
    color: #a3a3a3;
    text-align: right;
    font-size: 0.388888rem;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .item input{
    text-align: left !important;
  }
  .item .item-select{
    width: 5.555555rem;
    margin-right: 0.37037rem;
    color: #a3a3a3;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .item .item-select .item-select-value{
    flex: 1;
    height: 1.388888rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
  }
  .item .item-select .item-select-value input{
    width: 100%;
    height: 100%;
    text-align: right;
  }
  .item .item-select .item-select-icon{
    margin-left: 0.222222rem;
    width: 0.453703rem;
    height: 0.611111rem;
    display: flex;
    align-items: center;
  }

  /* 图片列表 */
  .img-box{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }
  .img-box .img-item{
    width: 4.481481rem;
    height: 2.814814rem;
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
  }
  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content{
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }
  .img-box .img-item .img-content .img-src{
    width: 100%;
    height: 100%;
    z-index: 11;
    object-fit: cover;
  }
  .img-box .img-item .img-content .img-group{
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }
  .img-box .img-item .img-content .img-group .img-btn{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }
  .img-box .img-item .img-content .img-group .img-btn:last-child{
    border-left: none;
  }
  .img-box .del-btn{
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  .img-box .desc-btn{
    color: #FFFFFF;
    font-size: 0.925925rem;
  }
  /* 图片列表的描述 */
  .img-box .show-desc{
    height: 3.703703rem;
  }
  .img-box .img-item .img-desc{
    width: 100%;
    height: 0.851851rem;
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    display: none;
  }
  .img-box .show-desc .img-desc{
    display: block;
  }

  ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .img-list:first-child{
    margin-left: 4.814814rem;
  }
  .imgs_ul{
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }
  .img_upload .img-item{
    z-index: 3 !important;
  }



  /* 按钮 */
  .btn-box{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 1.37037rem;
  }
  .btn-box .btn{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }


  /* 弹框 */
  .tk{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tk .tk-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 31;
    background-color: rgba(0,0,0,0.4);
  }
  .tk .tk-box{
    width: 9rem;
    height: 7.407407rem;
    background-color: #FFFFFF;
    z-index: 32;
    display: flex;
    flex-direction: column;
    border-radius: 0.222222rem;
  }

  .tk .tk-head{
    width: 100%;
    height: 1.4351851851851851rem;
    font-size: 0.388888rem;
    border-bottom: 1px #ddd solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tk .tk-head .tk-head-title{
    margin-left: 0.37037rem;
    flex: 1;
    height: 1.4351851851851851rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-head .tk-head-close{
    margin-right: 0.37037rem;
    width: 0.444444rem;
    height: 0.444444rem;
  }


  .tk .tk-list{
    flex: 1;
    width: 100%;
    overflow-y: scroll;
  }
  .tk .tk-item{
    width: 100%;
    height: 1.3888888888888888rem;
    font-size: 0.388888rem;
    display: flex;
    align-items: center;
  }
  .tk .tk-item .tk-item-value{
    margin-left: 0.37037rem;
  }
  .tk .tk-list .tk-item-checked{
    color: #2a6cfe;
  }

  .tk .tk-btns{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    margin-top: 0.37037rem;
    margin-bottom: 0.37037rem;
  }
  .tk .tk-btns .tk-btn{
    margin-left: 1.851851rem;
    margin-right: 1.851851rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.074074rem;
    background: #309dfa;
    color: #fff;
    font-size: 0.388888rem;
  }
  .tk .xz-tk{
    height: 5rem !important;
  }

  /* 底部弹框 */
  .btm_tk_item {
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin-left: 0.185185rem;
    margin-right: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
  }
  .btm_tk_item:first-child{
    border-radius: 0.148148rem 0.148148rem 0 0;
  }
  .btm_tk_item-end{
    border-radius: 0 0 0.148148rem 0.148148rem;
  }
  .btm_tk_title{
    color: #919191;
  }
  .btm_tk_cancle{
    font-weight: bolder;
    height: 1.3889rem;
    line-height: 1.3889rem;
    border-bottom: 1Px solid #ddd;
    text-align: center;
    margin: 0.185185rem;
    width: auto;
    background-color: #FFFFFF;
    border-radius: 0.148148rem;
  }
  .van-popup{
    background: none;
  }

  /* 视频列表 */
  .video-list{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.74074rem;
    width: auto;
    height: auto;
    display: flex;
    position: relative;
  }
  .video-list video{
    width: 100%;
    height: 4.87037rem !important;
  }
  .video-list .del{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }
  .video-list .del img{
    width: 100%;
    height: 100%;
  }

</style>
